<template>
    <PageLoader v-if="loaderEnabled" :logo="loaderLogo" :loaderType="loaderType"></PageLoader>

    <!-- begin:: Body -->
    <div class="lab d-flex flex-row flex-column-fluid">
        <!-- begin:: Aside Left -->
        <Aside v-if="asideEnabled"></Aside>
        <!-- end:: Aside Left -->

        <div id="kt_wrapper" class="d-flex flex-column flex-row-fluid wrapper">
            <Header v-if="showHeader" :title="pageTitle"></Header>
            <!-- begin:: Content -->
            <div id="kt_content" class="content d-flex flex-column flex-column-fluid">

                <!-- begin:: Content Body -->
                <div class="d-flex flex-column-fluid">
                    <div id="kt_content_container"
                         :class="{'container-fluid': contentWidthFluid, 'container-xxl': !contentWidthFluid}">
                        <router-view/>
                    </div>
                </div>
                <!-- end:: Content Body -->
            </div>
            <!-- end:: Content -->
            <Footer></Footer>
        </div>
    </div>
    <!-- end:: Body -->
    <scroll-top></scroll-top>
</template>

<script>
    import PageLoader from "./PageLoader";
    import {nextTick} from "vue";

    import HtmlClasses from "../core/LabService.js"

    import {initializeComponents, reinitializeComponents} from "../core/keenthemes.js";
    import {Mutations, Actions} from "../store/Enums";
    import {MenuComponent} from "../assets/js";
    import Header from "./Header";
    import Footer from "./Footer";
    import Aside from "./Aside";
    import ScrollTop from "./ScrollTop";

    export default {
        name: "Layout",
        components: {
            ScrollTop,
            Aside,
            Footer,
            Header,
            PageLoader
        },
        created() {
            this.$store.dispatch("lab/" + Actions.ADD_BODY_CLASSNAME, "page-loading")
        },
        mounted() {
            this.$store.commit("lab/" + Mutations.OVERRIDE_LAYOUT_CONFIG);
            nextTick(() => {
                initializeComponents();
            });

            setTimeout(() => {
                this.$store.dispatch("lab/" + Actions.REMOVE_BODY_CLASSNAME, "page-loading")
            }, 500)
        },
        computed: {
            loaderEnabled() {
                return this.$store.getters["lab/config"]("loader.display")
            },
            loaderLogo() {
                return this.$store.getters["lab/config"]("loader.logo")
            },
            loaderType() {
                return this.$store.getters["lab/config"]("loader.type")
            },
            pageTitle() {
                return this.$store.getters["lab/pageTitle"]
            },
            showHeader() {
                return this.$store.getters["lab/config"]("header.display")
            },
            contentWidthFluid() {
                return this.$store.getters["lab/config"]("content.width") === "fluid"
            },
            asideEnabled() {
                return this.$store.getters["lab/config"]("aside.display")
            },
            subheaderDisplay() {
                return this.$store.getters["lab/config"]("toolbar.display")
            }
        },
        watch: {
            $route: {
                handler: function () {
                    MenuComponent.hideDropdowns(undefined)

                    nextTick(() => {
                        reinitializeComponents();
                    });
                },
                deep: true
            }
        },
        beforeRouteEnter: (to, from, next) => {
            HtmlClasses.init()
            next()
        },
        beforeRouteLeave: (to, from, next) => {
            HtmlClasses.uninstall()
            next()
        }
    }
</script>

<style lang="scss">
    @import "@/assets/sass/style";

</style>
